import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.0

Rectangle{
    id:root
    width: childrenRect.width
    height: childrenRect.height
    color: "gray"
    //渐变颜色
    gradient: Gradient{
        GradientStop{position: 0.0;color: root.color}
        GradientStop{position: 1.0;color: Qt.lighter(root.color,1.5)}
    }
    ColumnLayout{
        spacing: 20
        Grid{
            spacing: 10
            columns: 5

        }

        Rectangle{
            id:box
            property bool toggle
            width: 100;height: 100
            gradient: Gradient{
                GradientStop{position: 0.0;color:'red'}
                GradientStop{position: 1.0;color: 'yellow'}
            }
            x:toggle?20:root.width-width-20
            Behavior on x{
                NumberAnimation{
                    id:animation
                    duration:1000
                }

            }
        }
    }
}
